<template>
  <div class="tableContainer">
    <table cellspacing="0">
      <thead>
        <th v-for="(item, index) in 30" :key="index">
          <a-popover
            v-model="visibleList[`visible${index}`]"
            title="Title"
            trigger="click"
          >
            <a slot="content" @click="handleConfirm(index)">Close</a>
            <a-button type="primary"> Click me </a-button>
          </a-popover>
        </th>
      </thead>
      <tr v-for="(item1, index1) in 5" :key="index1">
        <td style="width: 40px" v-for="(item, index) in 30" :key="index">
          <a-popover
            v-model="visibleList[`visible${index}`]"
            title="Title"
            trigger="click"
          >
            <a slot="content" @click="handleConfirm(index)">Close</a>
            <a-button type="primary"> Click me </a-button>
          </a-popover>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visibleList: {}
    }
  },
  created () {
    for (var i = 0; i < 30; i++) {
      this.$set(this.visibleList, `visible${i}`, false)
    }
  },
  methods: {
    handleConfirm (index) {
      console.log(index, `visible${index}`)
      this.visibleList[`visible${index}`] = false
    }
  }
}
</script>
<style lang="scss" scoped>
.tableContainer {
  table {
    width: 100%;

    > thead {
      background: #f1f4f6;
      line-height: 40px;
      > th {
        text-align: center;
        padding: 5px 10px;
        border-right: 1px solid blue;
        border-bottom: 1px solid blue;
      }
    }
    > tr {
      border-right: 1px solid blue;
      border-bottom: 1px solid blue;
      > td {
        line-height: 40px;
        text-align: center;
        border-right: 1px solid blue;
        border-bottom: 1px solid blue;
        > div {
          width: 100%;
          height: 100%;
          .el-select--medium {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>